<template>

    <div class="open-methods-buttons">
      <button @click="openProps">点击打开</button>
    </div>
    <div v-show="is_open" @click.self="closeProps"  class="props-cover">
      <div class="props-component" 
        :style="{ left: position.x + 'px', top: position.y + 'px' }"
      >
        <div class="props-herder" @mousedown="startDrag">
          <slot name="prop-header">
            这是弹窗头部区域
          </slot>
        </div>
        <div class="props-content">

          <!-- 插槽 在diy-props组件被调用时  -->
          <slot name="propsContent">
            这是弹窗内容区域
          </slot>

        </div>
        <div class="props-footer">
          <slot name="prop-footer">
            <button class="btn" :class="{'cancel': 1}" @click="closeProps">取消</button>
            <button class="btn" :class="{'confirm': 1}" @click="closeProps">确定</button>
          </slot>
        </div>
        
      </div>
    </div>
  </template>
  

<script lang='js'>


  export default {
    props:{
        Width: {
            type: String,
            default: 400,
            require: false
        },
        Height:{
            type: String,
            default: 400,
            require: false
        },
        dragAble:{
          type: Boolean,
          default: false,
          require: false
        }
    },
    data() {
      return {
        is_open: false,
        position: {
          x: 100,
          y: 100,
        },
        isDragging: false,
        offsetX: 0,
        offsetY: 0,
        }
    },

    methods: {
      openProps(){
        this.is_open = true;
      },
      closeProps(){
        this.is_open = false;
      },

      startDrag(e) {
        this.isDragging = true;
        this.startX = e.clientX;
        this.startY = e.clientY;
        this.startLeft = this.position.x;
        this.startTop = this.position.y;
        document.addEventListener("mousemove", this.doDrag);
        document.addEventListener("mouseup", this.stopDrag);
      },
      doDrag(e) {
        if (!this.isDragging) return;
        const dx = e.clientX - this.startX;
        const dy = e.clientY - this.startY;
        this.position.x = this.startLeft + dx;
        this.position.y = this.startTop + dy;
      },
      stopDrag() {
        this.isDragging = false;
        document.removeEventListener("mousemove", this.doDrag);
        document.removeEventListener("mouseup", this.stopDrag);
      },
      closeDialog() {
        this.$emit("close");
      }

    },
    created() {}
  }
</script>

<style scoped lang="scss">
  .props-cover{
      width: 100%;
      height: 100%;

      z-index: 1000;
      background-color: #b0b0b044;
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      // 核心模糊效果
      backdrop-filter: blur(2px); // 背景模糊
      -webkit-backdrop-filter: blur(2px); // Safari兼容

      .props-component{
        width: 450px;
        height: 400px;
        border-radius: 20px;
        padding: 10px;
        position: fixed;
        display: flex;
        align-items: center;
        justify-items: center;
        flex-wrap: wrap;
        background-color: #FFF;
        .props-herder{
          width: 100%;
          line-height: 30px;
          text-align: center;
          cursor: move;
          
        }
        .props-content{
          width: 100%;
          height: 300px;
          background-color: aqua;
        }
        .props-footer{
          width: 100%;
          display: flex;
          justify-content: space-around;
          // height: 100px;
          
          .btn{
            width:100px;
            outline: none;
            border: 0px solid;
            height: 30px;
            color: #FFF;
            border-radius: 5px;
            margin-top: 10px;
            letter-spacing: 4px;
            text-align: center;

            &.cancel{
              background-color: #e9382b;
            }
            &.confirm{
              background-color: #2b94fd;
            }
          }

        }
      }
  }
</style>

